import { Component, OnInit, ElementRef } from '@angular/core';
import { InterfaceService } from 'src/app/services/interface.service';

@Component({
  selector: 'app-employee',
  templateUrl: './employee.component.html',
  styleUrls: ['./employee.component.css']
})
export class EmployeeComponent implements OnInit {


  constructor(private elementRef: ElementRef, private ds: InterfaceService) { }
  ngOnInit() {

  }


  empList: any = [];

  change: boolean = false;//打开关闭状态
  container: any = null;//获取组件元素
  index: number = 0;//当前图标位置
  state: number = 0;//0为关闭 1为打开 2为缩小
  width: number = 700;//组件的宽度
  height: number = 600;//组件的高度
  hide: boolean = false;//组件放大缩小状态

  close() {
    this.change = false;
    this.hide = false;
    this.state = 0;
  }
  toSmall() {
    this.container = this.elementRef.nativeElement.querySelector('.container');
    this.small();
  }
  show(e) {
    if (this.state == 0) {
      this.index = e;
      this.change = true;
      this.hide = true;
      this.state = 1;
    } else if (this.state == 2) {
      this.hide = true;
      this.state = 1;
      setTimeout(() => {
        this.container.style.top = "50%";
        this.container.style.left = "50%";
        this.container.style.width = this.width + "px";
        this.container.style.height = this.height + "px";
        this.container.style.transform = "translate(-50%,-50%)";
      }, 100);
    }
  }
  small() {
    this.state = 2;
    this.container.style.width = 0;
    this.container.style.height = 0;
    this.container.style.transform = "translate(0,0)";
    this.container.style.top = document.body.clientHeight - 46 + "px";
    this.container.style.left = 72 + 42 * (1 + this.index) - 30 + "px";
    setTimeout(() => {
      this.hide = false;
    }, 1000);
  }
}
